<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
      <el-form-item label="患者姓名" prop="name">
        <el-input
            v-model="queryParams.name"
            placeholder="请输入患者姓名"
            clearable
            size="small"
            style="width:180px"/>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
            v-model="queryParams.phone"
            placeholder="请输入手机号"
            clearable
            size="small"
            style="width:180px"/>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input
            v-model="queryParams.idCard"
            placeholder="请输身份证号"
            clearable
            size="small"
            style="width:180px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询条件结束 -->


    <!-- 表格工具按钮开始 -->
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" :disabled="single" @click="handleViewFile">查看档案
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleViewCareHistory">
          查看就诊病例
        </el-button>
      </el-col>
    </el-row>
    <!-- 表格工具按钮结束 -->


    <!-- 数据表格开始 -->
    <el-table v-loading="loading" border :data="patientTableList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center"/>
      <el-table-column label="姓名" align="center" prop="name"/>
      <el-table-column label="电话" align="center" prop="phone"/>
      <el-table-column label="身份证号" align="center" prop="idCard"/>
      <el-table-column label="出生年月" align="center" prop="birthday">
        <template slot-scope="scope">
          <span>{{ scope.row.birthday.substring(0, 10) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="phone" :formatter="calculateAgeFormatter"/>
      <el-table-column label="性别" prop="sex" align="center" :formatter="sexFormatter"/>
      <el-table-column label="信息状态" prop="isFinal" align="center" :formatter="isFinalFormatter"/>
      <el-table-column label="创建时间" align="center" prop="createTime"/>
    </el-table>
    <!-- 数据表格结束 -->
    <!-- 分页控件开始 -->
    <el-pagination
        v-show="total>0"
        :current-page="queryParams.pageNum"
        :page-sizes="[3, 10, 20, 30]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
    <!-- 分页控件结束 -->


    <!-- 查看患者档案弹出层开始 -->
    <el-dialog
        :title="title"
        :visible.sync="fileOpen"
        width="1000px"
        center
        append-to-body>
      <el-form label-position="left" label-width="140px" inline class="demo-table-expand">
        <el-form-item label="ID:">
          <span v-text="patientObj.patientId"/>
        </el-form-item>
        <el-form-item label="姓名:">
          <span v-text="patientObj.name"/>
        </el-form-item>
        <el-form-item label="身份证号:">
          <span v-text="patientObj.idCard"/>
        </el-form-item>
        <el-form-item label="电话:">
          <span v-text="patientObj.phone"/>
        </el-form-item>
        <el-form-item label="患者性别:">
          <span v-text="patientObj.sex"/>
        </el-form-item>
        <el-form-item label="出生年月:">
          <span v-text="patientObj.birthday"/>
        </el-form-item>
        <el-form-item label="地址信息:">
          <span v-text="patientObj.address"/>
        </el-form-item>
        <el-form-item label="过敏信息:">
          <span v-text="patientObj.allergyInfo"/>
        </el-form-item>
        <el-form-item label="是否完善信息:">
          <span v-text="patientObj.isFinal"/>
        </el-form-item>
        <el-form-item label="最后登录ip:">
          <span v-text="patientObj.lastLoginIp"/>
        </el-form-item>
        <el-form-item label="最后登录时间:">
          <span v-text="patientObj.lastLoginTime"/>
        </el-form-item>
        <el-form-item label="创建时间:">
          <span v-text="patientObj.createTime"/>
        </el-form-item>
        <el-form-item label="更新时间:">
          <span v-text="patientObj.updateTime"/>
        </el-form-item>
        <el-form-item label="紧急联系人:">
          <span v-text="patientFileObj.emergencyContactName"/>
        </el-form-item>
        <el-form-item label="紧急联系人电话:">
          <span v-text="patientFileObj.emergencyContactPhone"/>
        </el-form-item>
        <el-form-item label="关系:">
          <span v-text="patientFileObj.emergencyContactRelation"/>
        </el-form-item>
        <el-form-item label="左耳听力:">
          <span v-text="patientFileObj.leftEarHearing"/>
        </el-form-item>
        <el-form-item label="右耳听力:">
          <span v-text="patientFileObj.rightEarHearing"/>
        </el-form-item>
        <el-form-item label="左眼视力:">
          <span v-text="patientFileObj.leftVision"/>
        </el-form-item>
        <el-form-item label="右眼视力:">
          <span v-text="patientFileObj.rightVision"/>
        </el-form-item>
        <el-form-item label="身高:">
          <span v-text="patientFileObj.height"/>
        </el-form-item>
        <el-form-item label="体重:">
          <span v-text="patientFileObj.weight"/>
        </el-form-item>
        <el-form-item label="血型:">
          <span v-text="patientFileObj.bloodType"/>
        </el-form-item>
        <el-form-item label="个人史:">
          <span v-text="patientFileObj.personalInfo"/>
        </el-form-item>
        <el-form-item label="家族史:">
          <span v-text="patientFileObj.familyInfo"/>
        </el-form-item>
        <el-form-item label="档案创建时间:">
          <span v-text="patientFileObj.createTime"/>
        </el-form-item>
        <el-form-item label="档案更新时间:">
          <span v-text="patientFileObj.updateTime"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelFile">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 查看患者档案弹出层结束 -->

    <!-- 患者病历的弹出层开始 -->
    <el-dialog
        :title="title"
        :visible.sync="careHistoryOpen"
        width="1000px"
        center
        append-to-body>
      <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
        <el-card>
          <el-form-item label="ID:">
            <span v-text="patientObj.patientId"/>
          </el-form-item>
          <el-form-item label="姓名:">
            <span v-text="patientObj.name"/>
          </el-form-item>
          <el-form-item label="身份证号:">
            <span v-text="patientObj.idCard"/>
          </el-form-item>
          <el-form-item label="电话:">
            <span v-text="patientObj.phone"/>
          </el-form-item>
        </el-card>
      </el-form>
      <el-card style="margin-top:3px">
        <div v-if="allPatientMsg?.length>0">
          <el-collapse accordion>
            <el-collapse-item
                v-for="(item,index) in allPatientMsg"
                :key="index"
                :name="index">
              <template slot="title">
                科室:【{{ item.deptName }}】就诊时间:【{{ item.caseDate }}】
              </template>
              <div>主诉:{{ item.caseTitle }}</div>
              <div>诊断信息:{{ item.caseResult }}</div>
              <div>医生建议:{{ item.doctorTips }}</div>
              <div>备注:{{ item.remark }}</div>
              <!--当前挂号单历史处方开始-->
              <el-collapse v-show="item.careOrders?.length>0" accordion>
                <el-collapse-item v-for="(it,i) in item.careOrders" :key="i">
                  <template slot="title">
                    【 {{ it.coType === '0' ? '药品处方' : '检查处方' }}】【{{ i + 1 }}】 <span>【处方总额】:￥{{
                      it.allAmount
                    }}</span>
                  </template>
                  <el-table
                      v-loading="loading"
                      border
                      :data="it.careOrderItems">
                    <el-table-column label="序号" align="center" type="index" width="50"/>
                    <el-table-column :label="it.coType==='0'?'药品名称':'项目名称'" align="center" prop="itemName"/>
                    <el-table-column label="数量" align="center" prop="num"/>
                    <el-table-column label="单价(元)" align="center" prop="price"/>
                    <el-table-column label="金额(元)" align="center" prop="amount"/>
                    <el-table-column label="备注" prop="remark" align="center"/>
                    <el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter"/>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div v-else style="text-align:center">
          暂无就诊数据
        </div>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelHistory">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 患者病历的弹出层结束 -->

  </div>

</template>
<script>
import {
  getPatientAllMessageByPatientId,
  getPatientById,
  getPatientFileById,
  listPatientForPage
} from "@/apis/docters/patient";
import {getDictDataAPI} from "@/apis/comm/dictData";

export default {
  name: "Patient",
  // 定义页面数据
  data() {
    return {
      // 是否启用遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 分页数据总条数
      total: 0,
      // 字典表格数据
      patientTableList: [],
      // 弹出层标题
      title: '',
      // 是否显示档案弹出层
      fileOpen: false,
      // 性别数据字典
      sexOptions: [],
      // 完善信息状态
      isFinalOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        idCard: undefined,
        phone: undefined
      },
      // 患者信息
      patientObj: {},
      // 档案信息
      patientFileObj: {},
      // 是否打开病历弹出层
      careHistoryOpen: false,
      // 患者所有就诊信息
      allPatientMsg: [],
      // 订单状态
      statusOptions: []
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 加载性别
      getDictDataAPI('sys_user_sex').then(res => {
        this.sexOptions = res.data
      })
      // 加载性别
      getDictDataAPI('his_patient_msg_final').then(res => {
        this.isFinalOptions = res.data
      })
      //  加载处方详情的状态字典数据
      getDictDataAPI('his_order_details_status').then(res => {
        this.statusOptions = res.data
      })
      // 查询表格数据
      this.getPatientList();
    },
    // 查询表格数据
    getPatientList() {
      this.loading = true // 打开遮罩
      listPatientForPage(this.queryParams).then(res => {
        this.patientTableList = res.data.records
        this.total = res.data.total
        this.loading = false// 关闭遮罩
      })
    },
    // 条件查询
    handleQuery() {
      this.getPatientList()
    },
    // 重置查询条件
    resetQuery() {
      this.resetForm('queryForm')
      this.getPatientList()
    },

    // 查询患者档案
    handleViewFile() {
      const patientId = this.ids[0]
      this.fileOpen = true
      this.title = '查询患者档案信息'
      this.patientFileObj = {}
      this.patientObj = {}
      // 查询患者
      getPatientById(patientId).then(res => {
        this.patientObj = res.data
        const sex = this.patientObj.sex
        const isFinal = this.patientObj.isFinal
        this.patientObj.sex = (sex === '0' ? '男' : sex === '1' ? '女' : '未知')
        this.patientObj.isFinal = isFinal === '0' ? '未完善' : '已完善'
      })
      // 查询档案
      getPatientFileById(patientId).then(res => {
        if (res.data !== null) {
          this.patientFileObj = res.data
        }
      })
    },
    // 查询患者就诊信息
    handleViewCareHistory(row) {
      const patientId = this.ids[0]
      this.careHistoryOpen = true
      this.title = '查询患者病历信息'
      this.patientObj = {}
      // 查询患者
      getPatientById(patientId).then(res => {
        this.patientObj = res.data
      })
      // 查询患者的就诊信息
      getPatientAllMessageByPatientId(patientId).then(res => {
        this.allPatientMsg = res.data
      }).catch(() => {
        this.msgError('查询失败')
      })
    },
    // 数据表格的多选择框选择时触发
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.patientId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 根据出生年月计算年龄
    calculateAgeFormatter(row) {
      return this.getAge(row.birthday.substring(0, 10))
    },
    // 翻译性别
    sexFormatter(row) {
      return this.selectDictLabel(this.sexOptions, row.sex)
    },
    // 翻译信息状态
    isFinalFormatter(row) {
      return this.selectDictLabel(this.isFinalOptions, row.isFinal)
    },
    // 分页pageSize变化时触发
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      // 重新查询
      this.getPatientList()
    },
    // 点击上一页  下一页，跳转到哪一页面时触发
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      // 重新查询
      this.getPatientList()
    },
    // 取消
    cancelFile() {
      this.fileOpen = false
      this.title = ''
    },
    // 翻译状态
    statusFormatter(row) {
      return this.selectDictLabel(this.statusOptions, row.status)
    },
    // 关闭就诊信息的弹出层
    cancelHistory() {
      this.careHistoryOpen = false
      this.allPatientMsg = []
    }
  }
}
</script>
<style scoped>

</style>
